import React from 'react';
import './style.css';
import emitter from '../../util/events';

// Components form 
import BaseForm from '../BaseForm';
import PaymentForm from '../PaymentForm';
import TransportForm from '../TransportForm';
import RefundmentForm from '../RefundmentForm';
import IDcodeForm from '../IDcodeForm';
import AttributeForm from '../AttributeForm';
import PictureForm from '../PictureForm';
import AttrInfoForm from '../AttrInfoForm';
import AttrPictureForm from '../AttrPictureForm';
import DepictForm from '../DepictForm';


import { Collapse } from 'antd';
const Panel = Collapse.Panel;


export default class AnchorItem extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			data: {},
			status: true
		};
		this.AnchorEl = props.AnchorEl;
		this.checkArr = props.AnchorEl.map((el, index) => (el.check && index.toString()))
		this.callback = this.callback.bind(this);
		this.handleFormChange = this.handleFormChange.bind(this)
	}

	componentDidMount() {
        // data事件通讯
        this.eventEmitter = emitter.addListener('getFormData', () => {
			setTimeout(() => {
				this.props.onChange(this.state);
				this.setState((state) => {
					state.status = true;
				})
			})
        });
    }

	callback(e) {
		// console.log(e)
	}

	handleFormChange(data) {
		for (const key in data) {
			if (data.hasOwnProperty(key)) {
				this.setState((state) => {
					state.data[key] = data[key]
				})
			}
		}
		if(!data) {
			this.setState((state) => {
				state.status = data;
			})
		}
	}

	render() {
		const Panels = this.AnchorEl.map((el, index) => {
			return <Panel id={el.id} header={el.title} key={index}>
				{
					el.id === 'base' && <BaseForm onChange={this.handleFormChange}/> //基础信息
				}
				{
					el.id === 'payment' && <PaymentForm onChange={this.handleFormChange}/> // 价格付款
				}
				{
					el.id === 'transport' && <TransportForm onChange={this.handleFormChange}/> // 运输方式
				}
				{
					el.id === 'refundment' && <RefundmentForm onChange={this.handleFormChange}/> // 退款政策
				}
				{
					el.id === 'IDcode' && <IDcodeForm onChange={this.handleFormChange}/> // 产品识别码
				}
				{
					el.id === 'attribute' && <AttributeForm onChange={this.handleFormChange}/> // 产品属性
				}
				{
					el.id === 'picture' && <PictureForm onChange={this.handleFormChange}/> // 产品图片
				}
				{
					el.id === 'attrInfo' && <AttrInfoForm onChange={this.handleFormChange}/> // 多属性信息
				}
				{
					el.id === 'attrPicture' && <AttrPictureForm onChange={this.handleFormChange}/> // 多属性图片
				}
				{
					el.id === 'depict' && <DepictForm onChange={this.handleFormChange}/> // 产品描述
				}
			</Panel>
		})

		return (
			<Collapse bordered={false} defaultActiveKey={this.checkArr} onChange={this.callback}>
				{Panels}
			</Collapse>
		)
	}
}